<template>
    <h2>原始</h2>
    <div class="tw:grid tw:grid-flow-col tw:grid-rows-4 tw:gap-2">
        <div class="项目">01</div>
        <div class="项目">02</div>
        <div class="项目">03</div>
        <div class="项目">04</div>
        <div class="项目">05</div>
        <div class="项目">06</div>
        <div class="项目">07</div>
        <div class="项目">08</div>
        <div class="项目">09</div>
    </div>
    <h2>实现子网格</h2>
    <div class="tw:grid tw:grid-flow-col tw:grid-rows-4 tw:gap-2">
        <div class="项目">01</div>
        <div class="项目">02</div>
        <div class="项目">03</div>
        <div class="项目">04</div>
        <div class="项目">05</div>
        <div class="tw:row-span-3 tw:grid tw:grid-rows-subgrid">
            <div class="项目 tw:row-start-2">06</div>
        </div>
        <div class="项目">07</div>
        <div class="项目">08</div>
        <div class="项目">09</div>
        <div class="项目">10</div>
    </div>
</template>

<style scoped="">
    @reference '@/tailwind.css';
    .项目 {
        @apply tw:w-24 tw:h-8;
        @apply tw:bg-violet-300 tw:rounded-md;
        @apply tw:flex tw:justify-center tw:items-center;
        @apply tw:font-bold tw:text-white;
    }
</style>